<!-- 在script 标签上使用setup，可以不用再使用return的写法了 -->
<!-- 其中 setup 标记的 script 必须是单独的，不能和export等其他共用 -->
<!-- 可以使用  npm i vite-plugin-vue-setup-extend -D 插件替换下面的写法，直接将组件名称定义写到script的name属性上 -->
<!--<script lang="ts">
export default {
  name: 'Person',
}
</script>-->

<!-- 可以使用  npm i vite-plugin-vue-setup-extend -D 插件替换下面的写法，直接将组件名称定义写到script的name属性上 -->
<!-- 如果没有定义组件名称，没有给script写name定义组件名称的话，默认就是组件的名称。 -->
<script setup lang="ts" name="Person">
// 数据
import { ref } from 'vue'
import { nanoid } from 'nanoid'

let car = ref({
  brand: '奔驰',
  price: 100,
})

// 修改整个方法
function updateCar() {
  // car = { brand: '宝马', price: 110 }; // 如果是reactive修饰的话，这么写页面是不更新的
  // car = reactive({ brand: '宝马', price: 110 }) // 如果是reactive修饰的话，这么写页面是不更新的

  // 如果是reactive修饰的话，下面这个写法页面可以更新
  let carResult = { brand: '宝马', price: 110 }
  // 如果是reactive修饰的话，其中Object.assign 会将参数2到参数n的值赋值到参数1的位置。
  // Object.assign(car, carResult)

  // 如果是ref 修饰的话，可以直接进行赋值修改。其中ref的value是响应式的，可以这样写
  car.value = carResult
}

let num = ref(0)
function sum() {
  num.value += 1
}
</script>

<template>
  <div class="person">
    <h1>汽车名称：{{ car.brand }}</h1>
    <h1>汽车价格：{{ car.price }} 万</h1>

    <button @click="car.brand += '!'">修改汽车名称</button>
    <button @click="car.price += 10">修改汽车价格</button>
    <button @click="updateCar()">修改汽车</button>
    <br />
    <h1>当前的sum值是：{{ num }}</h1>
    <button @click="sum">sum++</button>
  </div>
</template>

<style scoped>
.person {
  background-color: #dab649;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}

button {
  margin: 0 10px;
}
</style>
